<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jquery操作json数据</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>

</body>
<script>

    let data='{"data1":"hello","data2": [1, 2, 3]}';

    $(() => {
        jsonToObject();
        valuesToJson();
        classToJson();
    });

    /**
     * 功能:
     *      解析json字符串为Object.
     * 说明:
     *      1. jquery的parseJSON和这个JSON.parse方法的功能时一样的.
     */
    function jsonToObject() {
        const jsonObj = JSON.parse(data);
        const jsonObj2 = $.parseJSON(data);
        console.log(jsonObj.data2);
        console.log(jsonObj2.data2);
    }

    /**
     * 功能:
     *      使用JSON.stringify方法将一个js对象转换为json.
     * 说明:
     *
     */
    function valuesToJson() {
        let obj = {
            'name': 'zhangsan',
            'age': 45,
            'id': 1556484
        };
        const jsonStr = JSON.stringify(obj);
        console.log(jsonStr);
    }

    /**
     * 功能:
     *      将js中的class转换为json字符串.
     * 说明:
     *      1. 使用这种方式可以更好规范前后台数据交互.
     *      2. JSON.stringify会自动忽略class中为null的字段.
     */
    function classToJson() {
        let person = new Person(1, 'lss', 34);
        const jsonStr = JSON.stringify(person);
        console.log(jsonStr);

        let person1 = new Person();
        person1.name = 'sds';
        person1.age = 23;
        const jsonStr1 = JSON.stringify(person1);
        console.log(jsonStr1);
    }

    class Person {
        constructor(id, name, age) {
            this.id = id;
            this.name = name;
            this.age = age;
        }
    }


</script>
</html>